<template>
  <div>
    <div class="list-btn">
      姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getPayList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getPayList(url)" />
    </div>
    <div class="list-btn">
      订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getPayList(url)" />
    </div>
    <div class="list-btn">
      还款类型:
      <Select clearable style="width:200px" v-model="params.repayType" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=1>还款</Option>
        <Option :value=2>逾期</Option>
        <Option :value=3>减免</Option>
        <Option :value=4>代扣</Option>
        <Option :value=5>销账</Option>
        <Option :value=6>展期</Option>

      </Select>
    </div>
    <div class="list-btn">
      还款状态:
      <Select clearable style="width:200px" v-model="params.status" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=1>还款成功</Option>
        <Option :value=2>还款失败</Option>
        <Option :value=3>处理中</Option>
      </Select>
    </div>
    <div class="list-btn">
      还款时间:<DatePicker type="date" @on-change="startTime"  placeho鑫能贷lder="选择开始时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getPayList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" :disabled="statusKey==1" @click="getPayStatus">支付状态查询</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" :disabled="statusOrderKey==1" @click="getPayStatusKey">支付状态通知</Button>
    </div>

    <p style="font-weight: bolder;font-size:14px;">
      总计：订单数 <span style="color:rgb(237, 64, 20);font-weight: bolder">{{totalD.totalCount}}</span>
      条；成功还款金额 <span style="color:rgb(237, 64, 20);font-weight: bolder">{{totalD.totalRepayMoney?(totalD.totalRepayMoney/100).toFixed(2):0}}</span> 元
    </p>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getPayList(url)" @changePageSize="params.pageLimit = $event; getPayList(url)"></page-button>
  </div>
</template>

<script>
  // import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    // mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {
        totalCount:'',
        totalD:[],
        list:[],
        total:0,
        tag: {
          'title': '还款记录',
          'path': '/work/receipt/list'
        },
        listTitle: [
          {
            title: '订单号',
            minWidth: 180,
            key: 'nid',
            align:'left',
          },
          {
            title: '还款时间',
            key: 'createTime',
            minWidth:150,
            align:'center',
            render : (h,params) => {
              return h('div',this.getLocalTime(params.row.createTime))
            }
          },
          {
            title: '姓名',
            key: 'realname',
            minWidth:80,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:120,
            align:'center',
            render: (h, params) => {
              let phone = params.row.phone;
              return h('div', phone?`${phone.substr(0,3)}****${phone.substr(7)}`:'—')
            }
          },
          /*   {
               title: '借款金额(元)',
               key: 'loanMoney',
               minWidth:120,
               align:'center',
                render:(h,params) => {
                 return h('div',this.toYuan(params.row.loanMoney))
               }
             },
             {
               title: '实放金额(元)',
               key: 'realMoney',
               minWidth:120,
               align:'center',
               render:(h,params) => {
                 return h('div',this.toYuan(params.row.realMoney))
               }
             },
             {
               title: '还款银行名称',
               key: 'bankName',
               minWidth:130,
               align:'center'
             },*/
          /*   {
               title: '还款银行卡尾号',
               key: 'bankCardlast',
               minWidth:140,
               align:'center',

             },*/
          {
            title: '流水号',
            key: 'requestno',
            minWidth:250,
            align:'center',
            render : (h,params) => {
              return h('div',params.row.status == 1?(params.row.requestno?params.row.requestno:'—') : '—')
            }
          },
          {
            title: '还款通道',
            key: 'lendingChannel',
            minWidth:120,
            align:'center',
            render : (h,params) => {
              return h('div',this.getType(params.row.lendingChannel,'lendingChannel'))
            }
          },
          {
            title: '还款金额(元)',
            key: 'repayMoney',
            minWidth:120,
            align:'center',
            render:(h,params) => {
              return h('div',this.toYuan(params.row.repayMoney))
            }
          },
          {
            title: '类型',
            key: 'repayType',
            minWidth:120,
            align:'center',
            render: (h,params) => {
              let type = '';
              switch(params.row.repayType){
                case 1:
                  type = '还款';
                  break;
                case 2:
                  type = '逾期';
                  break;
                case 3:
                  type = '减免';
                  break;
                case 4:
                  type = '代扣';
                  break;
                case 5:
                  type = '销账';
                  break;
                case 6:
                  type = '展期';
                  break;
              }
              return h('div',type)
            }
          },
          {
            title: '状态',
            key: 'status',
            minWidth:120,
            align:'center',
            render: (h,params) => {
              let type = '';
              let color = '';
              switch(params.row.status){
                case 1:
                  type = '还款成功';
                  color='#19be6b';
                  break;
                case 2:
                  type = '还款失败';
                  color = '#ed4014';
                  break;
                case 3:
                  type = '处理中';
                  color = "#f90";
                  break;
              }
              return h('div',{
                style:{
                  color:color
                }
              },type)
            }
          },
          {
            title:'备注',
            key:'remarks',
            align:'left',
            minWidth:200,
            render: (h,params) => {
              return h('div',params.row.status == 2?(params.row.remarks == '成功'?'失败':params.row.remarks):params.row.remarks)
            }
          }

        ],
        url: '/userRepayment/list',
        nameListUrl: '',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
        statusKey:0,
        statusOrderKey:0,
        time1:'',
        time:'',

      }
    },
    methods:{
      getPayStatus(){
        let _this = this;
        _this.statusKey = 1;
        clearTimeout(_this.time1);
        this.$post('https://pay.souguakeji.com/pay/helibao',{token:sessionStorage.getItem('token')})
          .then((res) => {
            // console.log(res,'rr');
            let code = res.code;
            if(code === 0){

            }
            this.$Message.warning(`5分钟内请勿重复点击`);
          })
        _this.time1 = setTimeout(function(){_this.statusKey = 0},300000);
      },
      getPayStatusKey(){
        let _this = this;
        _this.statusOrderKey = 1;
        clearTimeout(_this.time);
        this.$post('https://pay.souguakeji.com/pay/cooperative',{token:sessionStorage.getItem('token')})
          .then((res) => {
            // console.log(res,'rr');
            let code = res.code;
            if(code === 0){

            }
            this.$Message.warning(`5分钟内请勿重复点击`);
          })
        _this.time = setTimeout(function(){_this.statusOrderKey = 0},300000);
      },

      getType(num,type) {
        let obj = {};
        if(type == 'lendingChannel'){
          obj = { //渠道
            1:"易宝",
            2:"合利宝",
            9:"财务销账"
          }
        }else if(type == 'loanStatus'){
          obj = { //放款状态
            "0": "待放款",
            "1": "待人工放款",
            "2": "放款中",
            "3": "放款成功",
            "4": "放款失败"
          }
        }else if(type == 'payStatus'){
          obj = { //还款状态
            "0": {name:"正常",color:'#515a6e'},
            "1": {name:"部分还款",color:'#ed4014'},
            "2": {name:"结清",color:'#19be6b'},
            "3": {name:"逾期",color:'#ed4014'},
            "4": {name:"还款中",color:'#f90'},
          }
        }
        for (let key in obj) {
          if (key == num) {
            return obj[key];
            break;
          }
        }
      },
      // 转化为元
      toYuan(money){
        if(money){
          return (money/100).toFixed(2)
        }else{
          return 0
        }

      },
      getLocalTime(time) {//时间戳转日期
        if(time){
          const date = new Date(time);
          const year = date.getFullYear()
          const month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
          const day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
          const hour = date.getHours() < 10 ? '0'+date.getHours() : date.getHours()
          const minute = date.getMinutes() < 10 ? '0'+date.getMinutes(): date.getMinutes()
          const second = date.getSeconds() < 10 ? '0'+date.getSeconds(): date.getSeconds()
          const t1 = [year, month, day].join('-')
          const t2 = [hour, minute, second].join(':')
          return `${t1} ${t2}`
        }else{
          return '—'
        }
      },

      //开始时间
      startTime(e){
        this.params.beginTime = e;
      },
      //结束时间
      endTime(e){
        this.params.endTime = e;
      },
      handleSuccessImg(data) {
        console.log(data,'ddd');
        this.$set(this.formRole, 'image', data.imgUrl)
      },
      submitModal(){
        this.$refs.formRole.validate((valid) => {
          if(valid){
            this.resetValidate('formRole');
            this.show = false;
          }
        })
      },
      getPayList (url,type='') { // 获取列表
        this.loading = true;
        for(let key in this.params){
          if(this.params[key] == undefined){
            delete this.params[key]
          }
        }
        this.channelCodeCode = this.params.channelCode;
        if(this.params.channelCode == '0'){
          this.params.channelCode = null;
          // delete this.params['channelCode']
        }
        // console.log('params',this.params)

        if(type === 'refresh'){
          this.params.pageCurrent = 1;
        }

        this.$post(url,this.params)
          .then((res) => {
            if(res.code === 0){
              this.loading = false;
              this.totalD = res.data;
              this.total = res.data.pageListData.resultCount;
              let list = res.data.pageListData.pageListData;
              if(url == '/bkcollection/list'){
                list.map((item) => {
                  if(item.settleStatus == 1){
                    item._disabled = true
                  }
                  if(item.allotStatus == 1){
                    item._disabled = true
                  }
                })
              }
              this.list = list;

            }else{
              // this.$Message.error(res.msg);
            }
          }, (err) => {
            this.loading = false;
            console.log(err);
          })
      },

    },
    created(){
      this.getPayList(this.url);
      this.$store.commit('changeTag', this.tag.path);
      this.$store.commit('openPage', this.tag);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
